Lektion 5
Listen und Aufzählungen

 

In dieser Lektion erfahren Sie Folgendes:

  1. Auflistung
  2. Aufzählung
  3. Verschachtelte Listen
  4. Definitionslisten

Mit Aufzählungen und Listen lassen sich sehr einfach klare Strukturen und Unterteilungen erzeugen. In dieser Lektion zeigen wir Ihnen, welche Möglichkeiten HTML bietet. Vorab zwei Beispiele:

Liste 1

  • Listenpunkt
  • Listenpunkt
  • Listenpunkt
  • Listenpunkt
Liste 2
  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
Die erste Liste ist eine reine Auflistung mit dem Punkt als Listenzeichen.
In HTML wird dieser Typ als ul (unordered list) bezeichnet. Unter unordered ist nicht die Unordnung zu verstehen, sondern das Fehlen einer Nummerierung. Listen dieses Typs werden mit dem Tag <ul></ul> erzeugt.

Die zweite Liste ist eine echte Aufzählung mit durchnummerierten Listenpunkten. In HTML wird dieser Typ als ol (ordered list) bezeichnet. Unter ordered ist die durchnummerierte Ordnung zu verstehen. Listen dieses Typs werden mit dem Tag <ol></ol> erzeugt.

Für beide Listentypen werden die Listeneinträge mit <li> gekennzeichnet. li steht für list item, also Listen-Gegenstand.

Sie können die Formatierung für Zeichen oder Texthervorhebungen auf die Listeneinträge anwenden. Sie können auch eine Liste aus Hyperlinks oder Grafiken erstellen. 

 
Auflistungen

Eine Auflistung wird zwischen <ul> und </ul> eingeschlossen. Die Listeneinträge stehen zwischen <li> und </li>. 

 

<ul>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>

Sieht im Browser so aus:
 
  • Listenpunkt
  • Listenpunkt
  • Listenpunkt
  • Listenpunkt

    •  

    Eine Listenüberschrift ist nicht vorgesehen. Notieren Sie eine Überschrift mit den üblichen HTML-Tags.

    Mit dem Attribut type können Sie zwischen drei verschiedenen Aufzählungszeichen wählen:
    <ul type="square">
    <ul type="circle">
    <ul type="disc">

    Beispiel:
     

    <ul type="square">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ul>
       
      Sieht im Browser so aus:
       
    • Listenpunkt
    • Listenpunkt
    • Listenpunkt
    • Listenpunkt

    <ul type="circle">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ul>
       
      Sieht im Browser so aus:
       
    • Listenpunkt
    • Listenpunkt
    • Listenpunkt
    • Listenpunkt

    <ul type="disc">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ul>
       
      Sieht im Browser so aus:
       
    • Listenpunkt
    • Listenpunkt
    • Listenpunkt
    • Listenpunkt
    Diese drei Variationen bezüglich des Aufzählungszeichens (Bullet) sind möglich. Beachten Sie bei Auflistungen stets, dass der Browser über die Darstellung am Bildschirm bestimmt. Sie können weder den Einzug noch die Position des Listensymbols beeinflussen.

     
    Aufzählungen

    Eine Aufzählung wird zwischen <ol> und </ol> eingeschlossen. Die Listeneinträge stehen zwischen <li> und </li>. 

    Das Aufzählungs- oder Nummerierungszeichen wird mit dem attribut type definiert. Wenn Sie nichts angeben, wird nummerisch mit 1. 2. 3. usw. numeriert. Sie können mit Groß- oder Kleinbuchstaben, römischen Ziffern in Groß- oder Kleinschreibung nummerieren.

    Beispiel:

    Eine Liste mit Kleinbuchstaben als Aufzählungszeichen:

     

    <ol type="a">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt
    2. Listenpunkt
    3. Listenpunkt
    4. Listenpunkt
    Beispiel:

    Eine Liste mit Großbuchstaben als Aufzählungszeichen:
     

    <ol type="A">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt
    2. Listenpunkt
    3. Listenpunkt
    4. Listenpunkt


    Beispiel:

    Eine Liste mit großen römischen Ziffern als Aufzählungszeichen:

     

    <ol type="I">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt
    2. Listenpunkt
    3. Listenpunkt
    4. Listenpunkt


    Beispiel:

    Eine Liste mit kleinen römischen Ziffern als Aufzählungszeichen:
     

    <ol type="i">
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt
    2. Listenpunkt
    3. Listenpunkt
    4. Listenpunkt
    Bei Aufzählungen besteht die Möglichkeit, einen Startwert für die Aufzählung vorzugeben. Der Startwert wird über das Attribut start festgelegt.

    <ol type="i" start="4">
    <li>Listenpunkt </li>
    <li>Listenpunkt </li>
    <li>Listenpunkt </li>
    <li>Listenpunkt </li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt 
    2. Listenpunkt 
    3. Listenpunkt 
    4. Listenpunkt 


    Wenn Sie innerhalb der Aufzählung des Indexes die laufende Nummer ändern wollen, können Sie das über das Attribut value erreichen. Sie erweitern das Tag <li> des entsprechenden Listeneintrags.
    <li value=8>

    Beispiel:
     

    <ol>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <li value="8">Punkt 3 bis 7 fehlen</li>
    <li>Listenpunkt</li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt 
    2. Listenpunkt 
    3. Punkt 3 bis 7 fehlen
    4. Listenpunkt
    Verschachtelte Listen

    Sie können auch eine Liste in eine Liste einbinden, um dadurch Untergliederungsebenen zu erzeugen.

    Beispiel:
     

    <ol type="I">
    <li>Listenpunkt </li>
    <li>Listenpunkt 
    <ol type="i">
    <li>Unter-Listenpunkt </li>
    <li>Unter-Listenpunkt </li>
    <li>Unter-Listenpunkt </li>
    <li>Unter-Listenpunkt </li>
    </ol> 
    </li>
    <li>Listenpunkt </li>
    <li>Listenpunkt </li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt
    2. Listenpunkt 
      1. Unter-Listenpunkt 
      2. Unter-Listenpunkt 
      3. Unter-Listenpunkt 
      4. Unter-Listenpunkt 
    3. Listenpunkt 
    4. Listenpunkt 


    Sie können auch eine Aufzählung mit einer Auflistung kombinieren:

    Beispiel:

    <ol type="I">
    <li>Listenpunkt </li>
    <li>Listenpunkt 
    <ul type="disc">
    <li>Unter-Listenpunkt </li>
    <li>Unter-Listenpunkt </li>
    <li>Unter-Listenpunkt </li>
    <li>Unter-Listenpunkt </li>
    </ul> 
    </li>
    <li>Listenpunkt </li>
    <li>Listenpunkt </li>
    </ol>

    Sieht im Browser so aus:
     
    1. Listenpunkt
    2. Listenpunkt 
      • Unter-Listenpunkt 
      • Unter-Listenpunkt 
      • Unter-Listenpunkt 
      • Unter-Listenpunkt 
    3. Listenpunkt 
    4. Listenpunkt 
    Aufgabe:
    Erstellen Sie eine Seite mit den Inhalten Ihrer Website mittels einer Liste. Setzen Sie als Listeneinträge Hyperlinks zu den entsprechenden Seiten.
    Definitionslisten

    Mit Definitionslisten werden Glossare erstellt. Ein Glossar ist eine Auflistung von Begriffen. Die Begriffe werden in den Einträgen der Liste erklärt. Das Prinzip basiert auf einer Definitionsliste. Diese wird mit <dl> </dl> erzeugt. In der Definitionsliste stehen die zu erklärenden Begriffe oder Ausdrücke. Dies sind die "Definitions-Terme" (die zu definierenden Ausdrücke) <dt> </dt>. Die Erklärungen zu den Begriffen sind die Definitionen <dd> </dd>.

    Beispiel:
    In einem Glossar sollen Begriffsdefinitionen für HTML-Tags erklärt werden. Das sieht z.B. so aus:
    HTML-Tags
    img
    Einbinden von Grafiken
    src
    Angabe der Quelle der Datei, die angezeigt werden soll. Die Pfadangabe kann relativ oder absolut erfolgen
    font
    Formatierungsangaben zu Schriftart, Größe und Farbe
    Der HTML-Quelltext:

    <dl>HTML-Tags
    <dt>img</dt>
    <dd>Einbinden von Grafiken</dd>
    <dt>src</dt>
    <dd>Angabe der Quelle der Datei, die angezeigt werden soll. Die Pfadangabe kann relativ oder absolut erfolgen</dd>
    <dt>font</dt>
    <dd>Formatierungsangaben zu Schriftart, Größe und Farbe</dd> 
    </dl>

    Aufgabe:

    Erstellen Sie eine nummerierte Liste und eine reine Auflistung mit mindestens 5 Listenpunkten.

    vorige Lektion
    nächste Lektion
    Inhaltsverzeichnis nach oben

    Hinweis
    Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben schicken Sie mir bitte eine Mail.

    Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
     

     © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.